<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
		
		<style type="text/css">
			body{
				padding-top: 50px;
			}
			div[class^=col] {
				padding: 10px
			}
			.item{
				height: 120px;
				border-radius : 4px;
				background : #eee;
				text-align: center;
			}
		</style>
	</head>
	<script src="js/base.js"></script>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-xs-3">
					<div class="item">
						<p class="text-center">商品1</p>
						<p>价格： $<code>56.3</code> 编号：<span>2310</span></p>
						<a class="btn btn-warning btn-sm">购买</a>
					</div>
				</div>
				<div class="col-xs-3">
					<div class="item">
						<p class="text-center">商品2</p>
						<p>价格： $<code>999</code> 编号：<span>5610</span></p>
						<a class="btn btn-warning btn-sm">购买</a>
					</div>
				</div>
				<div class="col-xs-3">
					<div class="item">
						<p class="text-center">商品3</p>
						<p>价格： $<code>156</code> 编号：<span>1306</span></p>
						<a class="btn btn-warning btn-sm">购买</a>
					</div>
				</div>
				<div class="col-xs-3">
					<div class="item">
						<p class="text-center">商品4</p>
						<p>价格： $<code>99.5</code> 编号：<span>9985</span></p>
						<a class="btn btn-warning btn-sm">购买</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	
	<script>
		document.body.onclick = function(e){
			var e = e || event;
			var btn = e.target || e.srcElement;
			var goodsname = btn.parentNode.children[0].innerText;
			console.log(btn.parentNode)
			var goodsprice = btn.parentNode.children[1].children[0].innerText;
			var goodscode = btn.parentNode.children[1].children[1].innerText;
			//把信息封装到对象中
			var p = {
				sno : goodscode,
				name : goodsname,
				price : goodsprice,
				count : 1,
			};
			
			var list = [];
			//从cookie中获取list，得到字符串
			var cookiestr = getCookie("plist");
			//判断取出的字符串是否为空
			if(cookiestr){
				//通过JSON.parse() 将字符串转换为数组对象
				list = JSON.parse(getCookie("plist"));
			}
			//判断要保存的商品是否已存在
			var flag = false;
			for(var i in list){
				//如果已存在，则不再存入数组，而是将商品数量+1
				if(list[i].sno == p.sno){
					flag = true;
					list[i].count++;
				}
			}
			//如果商品从未添加过，则存入数组
			if(!flag) list.push(p);
			//将数组再次转换为字符串，并再次存入cookie（覆盖了原有）
			setCookie("plist", JSON.stringify(list), 30);
		}
	</script>
</html>
